<template>
  <div class="box">
    <h2 :class="{ c: true, thin: flag }">App组件</h2>
    <div :style="{ margin: '10px', color: 'blue' }">动态样式</div>
    <p>我是app中的p标签</p>
    <ul>
      <li>11111111111111</li>
      <li>22222222222222</li>
    </ul>
    <MyLeft />
    <hr />
    <MyRight />
  </div>
</template>

<script>
import MyLeft from '@/components/MyLeft.vue'
import MyRight from '@/components/MyRight.vue'

export default {
  data () {
    return {
      flag: true
    }
  },
  components: { MyLeft, MyRight },
}
</script>

<style lang="less" scoped>
.c {
  color: red;
}
.thin {
  font-weight: 200;
}
ul {
  li {
    color: blue;
    line-height: 30px;
  }
}

p {
  color: red;
}

// 在父组件，希望修改子组件中某个标签的样式，需要穿透
// .box /deep/ h3 {
//   color: pink;
// }

.box {
  border: solid 1px black;
  /deep/ h3 {
    color: brown;
  }
}
</style>